---
title: 校验验证码
description: 了解如何创建一个 API 路由并从客户端进行获取。
i18nReady: true
type: recipe
---
import { Steps } from '@astrojs/starlight/components';

[服务器端点](/zh-cn/guides/endpoints/#服务器端点api-路由) 可以作为 REST API 端点使用，通常用于运行诸如身份验证、数据库访问和验证等操作，而无需将敏感数据暴露给客户端。

在本节示例中，将使用一个 API 路由来验证 Google reCAPTCHA v3，而不会将密钥直接暴露给客户端。

## 前提条件

- 一个开启了 [SSR 服务端渲染](/zh-cn/guides/on-demand-rendering/)（`output: 'server'`）的项目

## 操作步骤

<Steps>
1. 创建一个 `POST` 端点以接受 reCAPTCHA 数据，并使用 reCAPTCHA 的 API 对其进行验证。在这里，你可以安全地定义密钥值或读取环境变量。

    ```js title="src/pages/recaptcha.js"
    export async function POST({ request }) {
      const data = await request.json();

      const recaptchaURL = 'https://www.google.com/recaptcha/api/siteverify';
      const requestHeaders = {
        'Content-Type': 'application/x-www-form-urlencoded'
      };
      const requestBody = new URLSearchParams({
        secret: "YOUR_SITE_SECRET_KEY",   // 这可以是一个环境变量
        response: data.recaptcha          // 从客户端传入的令牌
      });

      const response = await fetch(recaptchaURL, {
        method: "POST",
        headers: requestHeaders,
        body: requestBody.toString()
      });

      const responseData = await response.json();

      return new Response(JSON.stringify(responseData), { status: 200 });
    }
    ```

2. 从客户端脚本使用 `fetch` 来访问你的端点：

    ```astro title="src/pages/index.astro"
    <html>
      <head>
        <script is:inline src="https://www.google.com/recaptcha/api.js"></script>
      </head>

      <body>
        <button class="g-recaptcha" 
          data-sitekey="PUBLIC_SITE_KEY" 
          data-callback="onSubmit" 
          data-action="submit"> Click me to verify the captcha challenge! </button>

        <script is:inline>
          function onSubmit(token) {
            fetch("/recaptcha", {
              method: "POST",
              body: JSON.stringify({ recaptcha: token })
            })
            .then((response) => response.json())
            .then((gResponse) => {
              if (gResponse.success) {
                // 验证码校验成功
              } else {
                // 验证码校验失败
              }
            })
          }
        </script>
      </body>
    </html>
    ```
</Steps>
